<template>
  <div class="container">
    <ul class="product-list">
       <li v-for="(item,index) in list" :key="item.name" class="li-container">
          <img :src="item.url" style="width:400px;height:200px" alt="飞机" />
          <div class="desc-container">
            <p>{{ item.name }}</p>
            <p>{{ item.desc }}</p>
          </div>
          <div class="link" :data-item="item" :data-index="index" @click="seeDetail(item,$event)">查看详情</div>
        </li>
    </ul>
  </div>
</template>
<script>
export default {
  name:"productManage"
}
</script>
<script setup>
import {getCurrentInstance,onMounted,onUpdated} from "vue";
import {list} from "./mock.js";
const {proxy} = getCurrentInstance();
const $router = proxy.$router;
onMounted(()=>{
  console.log("我挂在了")
})
onUpdated(()=>{
  console.log("我更新了")
})
function seeDetail(item,$event){
  $router.push({
    path:"/product-detail/" + item.id,
  })
}
</script>

<style lang="less" scoped>
.product-list{
  color: black;
    .li-container{
      display: grid;
      margin: 20px 50px;
      grid-template-columns: repeat(3, 33.3%);
      grid-template-rows: 100%;
      .desc-container{
        display: grid;
        height: 100%;
        grid-auto-flow: row dense;
        justify-self:center;
        align-self:center;
        p{
          display: grid;
          place-items: center;
        }
      }
      .link{
          display:inline-block;
          background:#e54d42;
          border-radius: 20px;
          padding: 20px;
          margin-right: 20px;
          width: 200px;
          color: #fff;
          cursor: pointer;
          text-decoration: none;
          height: 60px;
          box-sizing: border-box;
          grid-auto-flow: row dense;
          justify-self:center;
          align-self:center;
      }
    }
    
}
</style>
